<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Bs</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .delbu{
        float: right;
    }
    .sp1{
        font-size: 12px;
        color: gray;
        margin-left: 20px;
    }
</style>
<body>


    <div class="container" id="app">
        <h1>任务列表</h1>
        <p>
            添加任务 <input type="text" v-model="todo" @keyup.enter="adds" placeholder="请按下enter添加任务" name="" id="">
            <button @click="adds">点击添加</button>
            <button @click="all">所有任务</button>
            <button @click="no">未完成任务</button>
            <button @click="finish">已完成任务</button>
        </p>
        <ul class="list-group" v-for="(item,index) in list">
            <li class="list-group-item">
                <input type="checkbox" :checked="item.done" @click='change(index)'>
                {{item.value}}
                <span class="sp1">{{item.time | date}}</span>
                <button class="delbu" @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</body>
<script src="vue2.min.js"></script>
<script>
    Vue.filter("date",function(val){
        let mytime = new Date(val);
        var str = mytime.getFullYear()+"年"+(mytime.getMonth()+1)+"月"+mytime.getDate()+"日"+mytime.getHours()+"时"+mytime.getMinutes()+"分"+mytime.getSeconds()+"秒";
        return str;
    })
    const vm = new Vue({
        el: "#app",
        data: {
            todo: "",
            list: [],
            copylist: [],
            time:0,
        },
        methods: {
            time(){
                
            },
            adds() {
                let time = new Date;
                time = time.getTime();
                this.time = time;
                if (this.todo == '') return;
                this.list.push({
                    value: this.todo,
                    done: false,
                    time:time
                })
                this.copylist.push({
                    value: this.todo,
                    done: false,
                    time:time
                })
                this.todo = ""
            },
            change(index) {
                // this.list[index].done = !this.list[index].done;
                this.copylist[index].done = !this.copylist[index].done;
            },
            finish() {
                let list = this.copylist.filter(item => {
                    if (item.done) {
                        return item;
                    }
                })
                this.list = list
            },
            no() {
                let list = this.copylist.filter(item => {
                    if (item.done == false) {
                        return item;
                    }
                })
                this.list = list
            },
            all() {
                let list = [];
                list = this.copylist.slice(0)
                this.list = list;
            },
            del(index){
                let list = this.list;
                list.splice(index,1);
                this.list = list;
                let copylist = this.copylist;
                copylist.splice(index,1);
                this.copylist = copylist;
            }

        },
        computed: {

        },
        created() {
            let list = localStorage.getItem('list');
            list = JSON.parse(list);
            this.list = list;
        },
        beforeMount() {
            let copylist = [];
            copylist = this.list.slice(0)
            this.copylist = copylist;
        },
        updated() {
            let list=JSON.stringify(this.copylist);
            localStorage.setItem('list',list)
        },
    })
</script>

</html>